<template>
  <div id="RebookOrderSubmit">
    <NavBarTitle :NavBarTitle="NavBarTitle" />
    <div class="title">
      <div class="time">{{ day }} {{ hour }}出发</div>
      <div class="toTravel flex aCenter between">
        <div style="margin-left: 30px">
          <div class="city">{{ citysname }}</div>
          <div class="Station">{{ s_site }}</div>
        </div>
        <div class="ban flex column aCenter">
          <div class="type">{{ type }}</div>
          <div>
            <div class="arrow"></div>
            <div class="rotate"></div>
          </div>
          <div class="type">{{ mileage }}公里</div>
        </div>
        <div style="margin-right: 30px">
          <div class="city">{{ cityename }}</div>
          <div class="Station">{{ e_site }}</div>
        </div>
      </div>
      <div class="Departure">
        上车点：<span v-if="s_address == ''">{{ s_site }}</span
        ><span v-if="s_address != ''">{{ s_address }}</span>
      </div>
      <div class="Departure">
        下车点：<span v-if="e_address == ''">{{ e_site }}</span
        ><span v-if="e_address != ''">{{ e_address }}</span>
      </div>
    </div>
    <div class="cellF flex jCenter">
      <div class="cell">
        <van-cell
          title="购票须知"
          is-link
          :to="{
            path: '/TicketingInstructions',
            query: { title: '购票须知', type: 'gou' },
          }"
        />
        <van-cell
          title="退票说明"
          is-link
          :to="{
            path: '/TicketingInstructions',
            query: { title: '退票说明', type: 'tui' },
          }"
        />
      </div>
    </div>
    <div
      class="userInfoF flex jCenter"
      v-for="(item, index) in list"
      :key="index"
    >
      <div class="userInfo">
        <div class="name">{{ item.name }}</div>
        <div class="mobile">联系方式:{{ item.telephone | noneNum }}</div>
        <div class="IDCard">身份证:{{ item.idcard | noneId }}</div>
        <div style="width: 100%; margin-top: 13px" class="flex jCenter">
          <div
            style="width: 325.5px; height: 1px; background-color: #dedede"
          ></div>
        </div>
      </div>
    </div>
    <div class="loading flex aCenter jCenter column" v-if="isIssueTickets">
      <div
        class="flex aCenter jCenter"
        style="
          -webkit-border-radius: 10px;
          -moz-border-radius: 10px;
          border-radius: 10px;
          background-color: rgba(51, 51, 51, 0.8);
          width: 100px;
          height: 100px;
        "
      >
        <van-loading
          size="24px"
          class="flex column aCenter jCenter"
          color="#ffffff"
          type="spinner"
          >出票中...
        </van-loading>
      </div>
    </div>

    <div class="explainF">
      <div class="explain">保险说明：</div>
    </div>
    <van-tabbar>
      <div style="width: 93.9%; margin-left: 3.2%" class="flex between aCenter">
        <!--<div>订单总额 <span class="moneyM">￥{{ticket_price*list.length}}</span></div>-->
        <!--<div>订单总额 <span class="moneyM">￥{{price}}</span></div>-->
        <div>
          订单总额 <span class="moneyM">￥{{ totalPrice }}</span>
        </div>
        <div class="detailed" @click="showPopup">明细</div>
        <div>
          <van-button @click="addoOrder" color="#ff912f">改签订单</van-button>
        </div>
      </div>
    </van-tabbar>
    <van-popup
      v-model="show"
      position="bottom"
      closeable
      close-icon="close"
      :overlay="false"
      :style="{ height: '20%' }"
    >
      <div class="services flex column" style="margin-top: 8%">
        <div>
          票<span style="opacity: 0">价</span>价：<span class="marL"
            >{{ webTicketPrice }}元 * {{ list.length }} 人</span
          >
        </div>
        <div>
          总人数：<span class="marL">{{ list.length }}人</span>
        </div>
        <div>
          总票价：<span class="marL">{{ webTicketPrice * list.length }}元</span>
        </div>
        <div>
          服务费：<span class="marL"
            >{{ service }}元 * {{ list.length }} 人</span
          >
        </div>
        <div>
          保险费：<span class="marL"
            >{{ premium }}元 * {{ list.length }} 人</span
          >
        </div>
      </div>
    </van-popup>
    <van-dialog
      :beforeClose="chargeBtn"
      title="该班次已停售"
      v-model="show_"
      show-cancel-button
      confirmButtonText="拨打电话"
    >
      <div class="dialog flex column aCenter jCenter">
        <div class="callAd">如需改签该班次，请联系管理员</div>
        {{ ticket_price }}
      </div>
    </van-dialog>
    <Loading :isLoading="isLoading" />
  </div>
</template>

<script>
import NavBarTitle from "components/NavBarTitle.vue";
import Loading from "components/Loading.vue";
import { Dialog } from "vant";

export default {
  data() {
    return {
      NavBarTitle: "改签订单提交",
      isActive: "-1",
      list: [],
      departuretime: "",
      day: "",
      hour: "",
      citysname: "",
      cityename: "",
      sitesname: "",
      siteename: "",
      s_address: "",
      e_address: "",
      s_site: "",
      e_site: "",
      type: "",
      mileage: "",
      ticket_price: "",
      price: "",
      service: 4,
      premium: 1,
      show: false,
      show_: false,
      isLoading: true,
      isIssueTickets: false,
    };
  },
  filters: {
    noneNum(val) {
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      return val.replace(reg, "$1****$2");
    },
    noneId(val) {
      return `${val.substring(0, 4)}**********${val.substring(val.length - 3)}`;
    },
  },
  components: {
    NavBarTitle,
    Loading,
    [Dialog.name]: Dialog,
  },
  computed: {
    totalPrice() {
      return (this.list.length * this.ticket_price).toFixed(1);
    },
    // 前端展示的票价
    webTicketPrice() {
      return (this.ticket_price - this.service - this.premium).toFixed(1);
    },
  },
  watch: {
    list() {
      this.price = this.list.length * this.ticket_price;
    },
  },
  methods: {
    chargeBtn(action, done) {
      if (action === "confirm") {
        location.href = "tel:" + this.sys_telephone;
        this.show = false;
        this.$router.go(-1); //需要测试
      } else if (action === "cancel") {
        done();
        this.$router.go(-1);
      }
      done();
    },
    getTel() {
      let data = {
        token: this.$store.state.token,
      };
      this.$axios
        .post(this.$index + this.$api.user.personal, this.$Qs.stringify(data))
        .then((res) => {
          console.log(res);
          if (res.data.flag) {
            this.sys_telephone = res.data.data.sys_telephone;
          } else {
            this.$toast.fail(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    showPopup() {
      this.show = true;
    },
    addoOrder() {
      this.isIssueTickets = true;
      let data = {
        token: this.$store.state.token,
        order_id: this.$route.query.order_id,
        shift_id: this.$route.query.id,
        pt_id: this.$route.query.pt_id,
      };
      this.$axios
        .post(this.$index + this.$api.order.change, this.$Qs.stringify(data))
        .then((res) => {
          this.isIssueTickets = false;
          this.$toast.success("改签成功");
          setTimeout(() => {
            this.$router.replace("/myorder");
          }, 800);
          return false;
          console.log(res);
          if (res.data.flag) {
            this.isIssueTickets = false;
            this.$toast.success("改签成功");
            this.$router.replace("/myorder");
            Dialog.alert({
              title: "改签订单生成成功",
              message: `<div>${this.sitesname}----${this.siteename}</div>
                    <div>乘客:${this.list.length}人</div>
                    <div>发车时间:${this.departuretime}</div>`,
              confirmButtonColor: "#0fa0a0",
            })
              .then(() => {
                this.$router.replace("/myorder");
              })
              .catch(() => {
                this.$router.replace({
                  path: "/myorder",
                  query: { active: 1 },
                });
              });
          } else {
            this.$toast(res.data.msg);
            this.isIssueTickets = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    contacts() {
      // let data = {
      //     token: this.$store.state.token,
      //     id: 0
      // };
      // this.$axios.post(this.$index + this.$api.user.contacts, this.$Qs.stringify(data))
      //     .then((res) => {
      //         // console.log(res);
      //         if (res.data.flag) {
      //             this.list = res.data.data
      //         } else {
      //             this.$toast(res.data.msg);
      //         }
      //     }).catch((err) => {
      //     console.log(err);
      // })
    },
    info() {
      let data = {
        token: this.$store.state.token,
        id: this.$route.query.id,
        type: 1,
        pt_id: this.$route.query.pt_id,
        order_id: this.$route.query.order_id,
      };
      this.$axios
        .post(this.$index + this.$api.home.info, this.$Qs.stringify(data))
        .then((res) => {
          console.log(res);
          if (res.data.flag) {
            this.day = res.data.data.day;
            this.hour = res.data.data.hour;
            this.citysname = res.data.data.citysname;
            this.cityename = res.data.data.cityename;
            this.sitesname = res.data.data.sitesname;
            this.siteename = res.data.data.siteename;
            this.type = res.data.data.type;
            this.mileage = res.data.data.mileage;
            this.s_address = res.data.data.s_address;
            this.e_address = res.data.data.e_address;
            this.s_site = res.data.data.s_site;
            this.e_site = res.data.data.e_site;
            this.ticket_price = res.data.data.ticket_price;
            this.departuretime = res.data.data.departuretime;
            this.service = res.data.data.service_charge;
            this.premium = res.data.data.premium;
            this.list = res.data.data.passenger;
            this.isLoading = false;
          } else {
            this.isLoading = true;
            if (res.data.msg == "该班次已停售") {
              this.show_ = true;
            }
            // this.$toast({
            //     message: res.data.msg,
            //     duration: 1000,
            //     onClose: () => {
            //         this.$router.go(-1)
            //     }
            // });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  beforeMount() {
    this.getTel();
    this.contacts();
    this.info();
  },
  created() {},
};
</script>

<style scoped>
.services > div {
  font-size: 14px;
  color: #333333;
  margin-left: 12px;
  margin-top: 4px;
}

.marL {
  margin-left: 50px;
}

/deep/ .van-popup--bottom {
  bottom: 60px;
}

.detailed {
  font-size: 13px;
  color: #333333;
  margin-left: 20px;
}

.loading {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
}

.loading /deep/ .van-loading__text {
  margin-top: 10px;
  color: #ffffff;
}

.moneyM {
  font-size: 19px;
  color: #ff0909;
  margin-left: 12px;
}

/deep/ .van-button--normal {
  height: 43.5px;
  line-height: 43.5px;
  border-radius: 10px;
  padding: 0 45px;
}

/deep/ .van-tabbar {
  height: 62px;
  font-size: 15px;
  color: #333333;
}

.active {
  opacity: 0;
}

.explainF {
  width: 100%;
  margin-bottom: 100px;
}

.explain {
  padding: 25px 30px;
  font-size: 14px;
  color: #888888;
}

.addUserF {
  width: 100%;
}

.addUser {
  width: 93.9%;
  height: 50px;
  background-color: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}

.addUser /deep/ .van-cell {
  font-size: 16px;
  color: #0fa0a0;
  padding: 14px 17px 12px 17px;
}

.addUser /deep/ .van-cell__right-icon {
  display: none;
}

.userInfoF {
  width: 100%;
}

.userInfo {
  position: relative;
  height: 118px;
  width: 93.9%;
  background-color: #ffffff;
}

.title {
  width: 100%;
  height: 220px;
  background-color: #0fa1a0;
  z-index: -1;
}

.Departure {
  font-size: 13px;
  color: #ffffff;
  margin-bottom: 10px;
  margin-left: 32px;
}

.time {
  font-size: 15px;
  color: #ffffff;
  margin-left: 30px;
  padding-top: 22px;
}

.arrow {
  width: 67px;
  height: 1px;
  background-color: #ffffff;
}

.rotate {
  margin-left: 62.25px;
  width: 4.75px;
  height: 1px;
  background-color: #ffffff;
  -webkit-transform: rotate(-25deg);
  -moz-transform: rotate(-25deg);
}

.city {
  font-size: 17px;
  color: #ffffff;
}

.Station {
  font-size: 13px;
  color: #ffffff;
  margin-top: 6px;
}

.type {
  font-size: 12px;
  color: #ffffff;
  margin-top: 6px;
  margin-bottom: 5px;
}

.toTravel {
  position: relative;
  width: 100%;
  height: 80px;
}

.ban {
  position: absolute;
  margin-left: 40%;
}

.cellF {
  width: 100%;
  height: 60px;
}

.cell {
  width: 93.9%;
  background-color: #ffffff;
  margin-top: -42px;
  border-bottom: 9px solid #f2f2f2;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  overflow: hidden;
}

.cell /deep/ .van-cell {
  padding: 12px 17px;
}

.btn {
  position: absolute;
  right: 30px;
  bottom: 30px;
}

.btn img {
  width: 20px;
  height: 20px;
}

.name {
  margin-left: 17px;
  font-size: 17px;
  color: #333333;
  margin-top: 16px;
}

.mobile {
  margin-left: 17px;
  font-size: 14px;
  color: #888888;
  margin-top: 16px;
}

.IDCard {
  margin-left: 17px;
  font-size: 14px;
  color: #888888;
  margin-top: 11px;
}
.dialog {
  height: 90px;
  font-size: 18px;
  color: #333333;
}
.callAd {
  font-size: 13px;
  color: #999999;
}
</style>